<template>
    <div class="template-index-Lu" :key="templateIndexKey">
        <commpVxeTable
            :isCanWrap="true"
            :key="reCommpVxeTable"
            :config="dataTableConfig"
            :columns="columnsVxe"
            :formItem="formItem"
            @checkboxChange="checkboxChange"
            ref="administrativeOffice"
            @searchEvent="searchEvent"
            @resetEvent="resetEvent"
            >
            <template v-slot:externalOperations="{data}">
                <!-- <vxe-form-item>
                    <template>
                        <a-button class="red-btn" type="primary" @click="deleteClick({},true)" icon="delete">批量删除</a-button>
                    </template>
                </vxe-form-item> -->
            </template>
            <template v-slot:operation_fsqr="{row}" data-desc="申请人">
                <span style="padding-right: 21;" v-if="row.fjbr && row.fjbr.length == 2">
                    <span v-for="(trem,tI) in row.fjbr.split('')" :key="tI" >
                        {{trem}}
                        <span v-if="tI+1 !== row.fjbr.split('').length">&nbsp;&nbsp;</span>
                    </span>
                </span>
                <span style="padding-right: 21;" v-else>{{ row.fjbr }}</span>
            </template>
            <template v-slot:operation_btn="{row}" data-desc="自定操作栏">
                <a-form layout="inline">
                    <a-form-item>
                        <a-button class="blue-btn" @click="reviseClick(row)" icon="edit">办理</a-button>
                    </a-form-item>
                    <a-form-item v-if="row.fbxlx !== '审评员报销'">
                        <a-button class="red-btn" type="primary" @click="deleteClick(row)" icon="delete">删除</a-button>
                    </a-form-item>
                </a-form>
            </template>
        </commpVxeTable>
        <handleModal ref="handleModalRef" @resetEvent="resetEvent"></handleModal>
    </div>
</template>
<script>
import  commpVxeTable   from '@/components/commp-vxe-table/commp-vxe-table.vue'
import handleModal from '../modal/handleModal'
import assessCheckApi from './service/api.js'
import { queryByJodId,nkDeletbxList } from './service/index'
export default {
    components: {
        commpVxeTable,
        handleModal
    },
    data() {
        return {
            reCommpVxeTable: '',
            dataTableConfig: {
                api: assessCheckApi.nkBxList,
                rowId: 'id',
                urlType: true,
                paramet: {}
            },
            columnsVxe: [
                {
                    type: 'checkbox',
                    width: 60 ,
                    fixed: 'left'
                },{
                    title: '单据号',
                    field: 'fdjh',
                },{
                    title: '报销内容描述',
                    field: 'fbxnrms',
                },{
                    title: '发起人',
                    field: 'fjbr',
                    width: 80,
                    interval:true,
                    slots: {
                        default:'operation_fsqr',
                    }
                },{
                    title: '发起科室',
                    field: 'fjbks',
                    width: 150,
                },{
                    title: '报销类型',
                    field: 'fbxlx',
                },{
                    title: '操作',
                    field: 'jobid',
                    width: 190,
                    titleInterval:true,
                    slots: {
                    // 使用插槽模板渲染
                        header:'data3_header',
                        default: 'operation_btn',
                    },
                }
            ],
            formItem: [
                {
                    label: '申请人',
                    model: 'fjbr',
                },{
                    label: '单据号',
                    model: 'fdjh',
                },{
                    label: '报销单类型',
                    model: 'fbxlx',
                },
            ],
            idList: [],
            sfkyhxShow: false,
            templateIndexKey: null,
        }
    },
    mounted() {
    },
    methods: {
        // 勾选
        checkboxChange(val){
            //console.log('已选择',val)
            this.idList = []
            if(val.length){
                val.forEach(item => {
                    this.idList.push(item.id)
                });
            }
        },
        // 搜索
        searchEvent(){
            this.dataTableConfig.paramet = {
                ...this.dataTableConfig.paramet,
            }
        },
        // 重置
        resetEvent(){
            //console.log('重置')
            this.reCommpVxeTable = Date.now()
            this.dataTableConfig.paramet = {
                ...this.dataTableConfig.paramet,
            }
        },
        // 点击办理
        reviseClick(row){
            //console.log(row)
            let refName = ''
            if(row.fbxlx == '一般报销'){
                refName = 'yiBanBaoXiaoModalRef'
            } else if(row.fbxlx == '差旅报销'){
                refName = 'addBaoXiaoModalRef'
            } else if(row.fbxlx == '审评员报销'){
                this.$refs.handleModalRef.reimburseClick({...row,bxdid:row.id})
                return
            }
            let data = {
                id: row.id
            }
            this.$refs.handleModalRef.applicationClick(data,refName)
        },
        // 删除
        deleteClick(row,bath){
            if(bath){
                if(this.idList.length <= 0){
                    this.$message.warning('请勾选需要批量删除的数据')
                    return
                }
            }
            var that = this
            this.$confirm({
                title:'您确认要删除吗？',
                onOk() {
                    let data = bath?that.idList.toString():row.id
                    nkDeletbxList({id:data}).then(res => {
                        if(res.success){
                            that.reCommpVxeTable = Date.now()
                            that.$message.success(res.message)
                        } else {
                            that.$message.warning(res.message)
                        }
                    })
                }
            })
        },
    },
}
</script>
